<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
     *{margin:0;
     padding:0;
    box-sizing: border-box;
    list-style: none;
    }
    a{display:block;}*
      #header{
        background:#1d6dff;
        height: 1.3333rem;
        /* padding: .1333rem; */
        text-align: center;
        overflow: hidden;
    }

    #header .left {
        margin-top: .1333rem;
        text-align: center;
        font-size: .5333rem;
        color: #fff;
        float: left;
        text-decoration: none;
    }
    #header h4{
        display: inline-block;
        text-align: center;
        font-size: .5333rem;

        font-weight: bolder;
        color: #fff;
        margin-top: .2667rem;
        margin-bottom: .2667rem;
    }
     #header .right {
         float: right;
         padding: 0.1867rem;
    }
    #header .right a{
        color: #666;
        text-decoration: none;
    }
    #header .right a img{
        height: .9067rem;
        vertical-align: center;
    }
    body,
    ul {
        /* height: 1000px; */
        margin: 0;
    }

    ul {
        list-style: none;
        padding: 0;
    }

  ul  li {
        height: 100px;
        border-bottom: 2px solid deepskyblue;
    }
 ul li a{
     color:#666;
     overflow:hidden;
     font-size: .3733rem;
 }
 ul li a img{
     display:inline-block;
     float:left;
 }
 ul li a .f2{
     margin-top: .7rem;
     padding-left: .2667rem;
 }  

</style>

<body>
    <header id="header">
        
        <a href="#" class="left">
            〈
        </a>
        <h4>
        国内折扣
        </h4>
         <div class="right">
            <a href="#"><img src="../images/header_app.png" alt="" width="34"></a>    
         </div>
    </header>
    <ul class="container">
       
    </ul>
    
</body>

</html>
<script src="../js/lazyload.js"></script>
<script>
   

    let container = document.querySelector('.container')

    

    function render(data, el) {
        console.log(data, el)


        data.forEach(item => {
            let li = document.createElement('li');
            //一步到位取出img地址
            let regExp = /(?<=imgurl=)[^'"]*/
            let result = item.productImg2.match(regExp)
            let domStr = `<a href="../indexXiang.html">
             <img width="100" src=${result[0]} alt="">
             <div class="f1">${item.productName}</div>
             <div class="f2">
                <span>${item.productFrom}</span>
                <span>${item.productTime}</span>
            </div>
            <span class="talk">${productComCount}<span>
            </a>
             `
            //把上面的字符串结构放到li里面
            li.innerHTML = domStr;
            //把li添加到页面的容器中
            el.appendChild(li)
        })
    }

    //2.首次发起页面请求
    function getData(pageid = 0) {
        fetch(`http://chst.vip:1234/api/getmoneyctrl?pageid=${pageid}`)
            .then(body => body.json())
            .then(res => {
                console.log(res)
                render(res.result, container)
            })
    }

    getData() //首次调用

    //声明初始的pageid

    let pageid = 1;

    lazyLoad(function () {
        // 在这里发送请求
        pageid++
        if (pageid > 14) {
            alert('服务器没有更多数据了')
            return
        }
        //pageid最多到14;超过了 服务器就没有数据响应了
        getData(pageid)
        // console.log('999999')
    }, 100)
</script>